'use client'
import { useState } from 'react'
import { AnimatePresence, motion } from 'motion/react'
import { cn } from '@/lib/css/util'

export function MotionPresence2(){
    const images = [
        "https://plus.unsplash.com/premium_photo-1747137906729-6f91d5be6389?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjAxfHxwaG90b3N8ZW58MHx8MHx8fDA%3D",
        "https://images.unsplash.com/photo-1597160371487-c1d355017163?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTI1fHxwaG90b3N8ZW58MHx8MHx8fDA%3D",
        "https://plus.unsplash.com/premium_photo-1745937149677-3aa4c33a43f4?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTkzfHxwaG90b3N8ZW58MHx8MHx8fDA%3D",
        "https://images.unsplash.com/photo-1597807114235-c7509d630420?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTM0fHxwaG90b3N8ZW58MHx8MHx8fDA%3D",
        "https://images.unsplash.com/photo-1596115391899-7397bcf426e7?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQzfHxwaG90b3N8ZW58MHx8MHx8fDA%3D",
        "https://images.unsplash.com/photo-1740703749903-cf3a78e50a43?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDc0fHxwaG90b3N8ZW58MHx8MHx8fDA%3D",
    ]
    const [selected, setSelected] = useState(5);
    const LEN = images.length;
    return(
        <div className={'h-screen bg-black py-20'}>
            <div className={'max-w-7/12 mx-auto'}>
                <div className={'relative h-100'}>
                    <ul className={'h-80'}>
                        <AnimatePresence mode={'wait'}>
                            {
                                images.map((url,index) => (
                                    selected === index && (
                                        <motion.li key={index}
                                                   initial={{y:-50}}
                                                   animate={{y:0}}
                                                   exit={{
                                                       y:50,
                                                       opacity: [1,0.5,0],
                                                       transition:{
                                                           duration: 0.2
                                                       }
                                                    }}
                                        >
                                            <img src={url} alt="" className={'aspect-video'}/>
                                        </motion.li>
                                    )
                                ))
                            }
                        </AnimatePresence>
                    </ul>
                    <span className={'absolute left-10 text-white bottom-10 text-4xl font-semibold text-shadow-lg text-shadow-slate-300'}>{ selected + 1 }</span>

                    <ul className={'absolute left-1/2 -translate-x-1/2 bottom-5 flex gap-x-5'}>
                        {
                            [...new Array(LEN)].map((_,idx) => (
                                <li key={ idx }>
                                    <button
                                        className={cn('px-3 bg-slate-400/50 cursor-pointer rounded-sm disabled:cursor-not-allowed')}
                                        disabled={ selected === idx}
                                        onClick={() => setSelected(idx)}>
                                        <span className={'text-white text-sm font-mono'}>
                                            { idx + 1 }
                                        </span>
                                    </button>
                                </li>
                            ))
                        }
                    </ul>
                </div>
            </div>
        </div>
    )
}
